::ng-deep .jumpable:hover {
  cursor: pointer;

  .navigator {
    color: var(--live-angular-color-primary-hover) !important;
  }
}

::ng-deep .navigator:hover {
  color: var(--live-angular-color-primary-hover) !important;
  cursor: pointer;
}

.aui-fullpage {
  background-color: var(--live-angular-color-page-background);
}

.home {
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-rows: 320px;
  gap: 16px 16px;
  box-sizing: border-box;
  color: var(--live-angular-color-text-regular);

  .header-slot {
    display: flex;
    align-items: center;
    gap: 8px;

    .cascader-label {
      font-size: 14px;
      display: flex;
      align-items: center;
    }

    .cascader-label:hover {
      color: var(--live-angular-color-primary-hover);
    }

    .link {
      font-size: 14px;
      cursor: pointer;
      color: var(--live-angular-color-primary-hover);
    }
  }

  .card {
    border: 1px solid var(--live-angular-color-card-border);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .card1 {
    grid-column: 1/3;
    grid-row: 1/3;
  }

  .card2 {
    grid-column: 1/3;
    grid-row: 3/4;
  }
}

.oneColumn {
  grid-template-columns: repeat(1, 1fr);

  .card1 {
    grid-column: 1/2;
    grid-row: 1/3;
  }

  .card2 {
    grid-column: 1/2;
    grid-row: 3/4;
  }
}

.twoColumns {
  grid-template-columns: repeat(2, 1fr);
}

.threeColumns {
  grid-template-columns: repeat(3, 1fr);
}

.fourColumns {
  grid-template-columns: repeat(4, 1fr);
}

::ng-deep .empty-box {
  margin-top: 24px;
}

::ng-deep .not-show {
  display: none !important;
}

::ng-deep .customize-panel {
  width: 100px !important;
}

.node-label-warp {
  max-width: 100px;
}
